<template>
  <div class="reset-container">
    <div class="reset-header">
      <span>重置密码</span>
      <span @click="goBack"><svg-icon icon-class="back" />返回</span>
      <hr>
    </div>
    <el-form class="reset-form" autoComplete="on" :model="passwordForm" :rules="passwordRules" ref="passwordForm"   label-position="left">
      <el-input type="hidden" v-model="passwordForm.password"></el-input>
      <el-form-item prop="password">
        <el-input type="password" v-model="passwordForm.password" placeholder="请输入旧密码"></el-input>
      </el-form-item>
      <el-form-item prop="npassword1">
        <el-input  type="password" placeholder="请输入新密码(长度为8~16个字符)" v-model="passwordForm.npassword1"></el-input>
      </el-form-item>
      <el-form-item prop="npassword2">
        <el-input  type="password" placeholder="确认新密码(长度为8~16个字符)" v-model="passwordForm.npassword2"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style ="width: 100%" @click="resetPassword">重置密码</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import { resetPassword } from '@/api/login'

export default {
  name: 'reset_password',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (value.length < 8 || value.length > 16) {
        callback(new Error('密码长度为8~16个字符'))
      } else {
        if (this.passwordForm.npassword2 !== '') {
          this.$refs.passwordForm.validateField('npassword2')
        }
        callback()
      }
    }
    var validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.passwordForm.npassword1) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false,
      passwordForm: {
        npassword1: '',
        npassword2: '',
        password: ''
      },
      passwordRules: {
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        npassword1: [{ required: true, trigger: 'blur', validator: validatePass }],
        npassword2: [{ required: true, trigger: 'blur', validator: validatePass1 }]
      }
    }
  },
  methods: {
    goBack() {
      history.go(-1)
    },
    resetForm() {
      this.password = ''
      this.npassword1 = ''
      this.npassword2 = ''
    },
    handleReset() {
      this.resetForm()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['passwordForm'].clearValidate()
      })
    },
    resetPassword() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          resetPassword(this.passwordForm).then(response => {
            if (response.code === 1) {
              this.$message({
                title: '成功',
                message: '重置成功',
                type: 'success',
                duration: 3000
              })
              setTimeout(() => {
                this.$store.dispatch('FedLogOut').then(() => {
                  location.reload()// 为了重新实例化vue-router对象 避免bug
                })
              }, 3 * 1000)
            } else {
              setTimeout(() => {
                this.$message.error(response.data.msg)
              }, 3 * 1000)
            }
          })
        } else {
          console.log('新建用户失败！')
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $bg:#2d3a4b;
  $dark_gray:#889aa4;
  $light_gray:#eee;
  .reset-container {
    position: fixed;
    height: 100%;
    width: 100%;
    background: url("../../assets/images/bg.jpg");
    .reset-header {
      width: 320px;
      padding: 35px 35px 0px 35px;
      margin: 120px auto;
      background-color: #fff;
      border-radius: 10px 10px 0 0;
      span {
        &:first-of-type {
          display: inline-block;
        }
        &:last-of-type {
          margin-left: 130px;
          display: inline-block;
          cursor: pointer;
        }
      }
    }
    .reset-form{
      position: absolute;
      left: 0;
      right: 0;
      width: 320px;
      padding: 15px 35px 15px 35px;
      margin: -120px auto;
      height-min: 400px;
      background-color: #fff;
      border-radius: 0 0 10px 10px;
    }
    .title {
      font-size: 26px;
      font-weight: 400;
      color: #000;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }
</style>
